<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	  *{margin:0;padding:0;}
       #div1{width:712px;height:108px;background:red;position:relative;margin:100px auto;overflow: hidden;}
       #div1 ul{position:absolute;left:0;top:0;}
       #div1 ul li{float:left;width:178px;height:108px;list-style: none;}
       img{width:178px;height:108px;}
       img:hover{cursor:pointer;}
	</style>
	<script type="text/javascript">
		window.onload=function (){
			var oDiv=document.getElementById('div1');
			var oUl=document.getElementById("ul")
			// var oUl=oDiv.getElementsByTagName('ul')[0];
			var ali=oUl.getElementsByTagName('li');
			var speed=-2;
		   oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
			 //把自己内部的东西复制一份再给自己
		 oUl.style.width=ali[0].offsetWidth*ali.length+'px';
		 function move(){
                // if(oUl.offsetLeft<-oUl.offsetWidth/2){
                // 	oUl.style.left='0';
                // }
               
                if(oUl.offsetLeft>0){
                	oUl.style.left=-oUl.offsetWidth/2+'px';
                }
                oUl.style.left=oUl.offsetLeft+speed+'px';
                // oUl.style.left=oUl.offsetLeft-2+'px';
			}
			var timer=setInterval(move,30);
			oDiv.onmouseover=function(){
				clearInterval(timer);
			}
			oDiv.onmouseout=function(){
				timer=setInterval(move,30);
			}
			document.getElementById('a1').onclick=function (){
				speed=-2;
			}
			document.getElementById('a2').onclick=function (){
				speed=+2;
			}
		};
	
	</script>
</head>
<body>
    <a href="#" id="a1">向左转</a>
    <a href="#" id="a2">向右转</a>
	<div id="div1">
		<ul id="ul">
			<li><img src="img/0.jpg"></li>
			<li><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/4.jpg"></li>
			<li><img src="img/5.jpg"></li>
			<li><img src="img/6.jpg"></li>
			<li><img src="img/7.jpg"></li>
			<li><img src="img/8.jpg"></li>
			<li><img src="img/9.jpg"></li>
		</ul>
	</div>
</body>
</html>